const {
    createEditor,
    createToolbar
} = window.wangEditor

const editorConfig = {
    placeholder: 'Type here...',
    onChange(editor) {
        const html = editor.getHtml()
    },
    MENU_CONF: {}
}
editorConfig.MENU_CONF['uploadImage'] = {
    server: '/api/upload/img',
    fieldName: 'img',
}
editorConfig.placeholder = '请输入内容~~~'
editorConfig.scroll = false
const editor = createEditor({
    selector: '#editor-container',
    html: '<p><br></p>',
    config: editorConfig,
    mode: 'default',
})
editorConfig.MENU_CONF['codeSelectLang'] = {
    // 代码语言
    codeLangs: [{
            text: 'CSS',
            value: 'css'
        },
        {
            text: 'HTML',
            value: 'html'
        },
        {
            text: 'XML',
            value: 'xml'
        },
        {
            text: 'Javascript',
            value: 'javascript'
        },
        {
            text: 'Typescript',
            value: 'typescript'
        },
        {
            text: 'JSX',
            value: 'jsx'
        },
        {
            text: 'Go',
            value: 'go'
        },
        {
            text: 'PHP',
            value: 'php'
        },
        {
            text: 'C',
            value: 'c'
        },
        {
            text: 'Python',
            value: 'python'
        },
        {
            text: 'Java',
            value: 'java'
        },
        {
            text: 'C++',
            value: 'cpp'
        },
        {
            text: 'C#',
            value: 'csharp'
        },
        {
            text: 'Visual Basic',
            value: 'visual-basic'
        },
        {
            text: 'SQL',
            value: 'sql'
        },
        {
            text: 'Ruby',
            value: 'ruby'
        },
        {
            text: 'Swift',
            value: 'swift'
        },
        {
            text: 'Bash',
            value: 'bash'
        },
        {
            text: 'Lua',
            value: 'lua'
        },
        {
            text: 'Groovy',
            value: 'groovy'
        },
        {
            text: 'Markdown',
            value: 'markdown'
        },
    ]
}
const toolbarConfig = {}
const toolbar = createToolbar({
    editor,
    selector: '#toolbar-container',
    config: toolbarConfig,
    mode: 'default', // or 'simple'
})

let publish = document.getElementsByClassName("publish")[0];
let biaoqian = document.getElementsByClassName("biaoqian")[0];
let zhaiyao = document.getElementsByClassName("zhaiyao")[0];
let jt = document.getElementsByClassName("jiantou")[0];
let lab_ul = document.getElementsByClassName("lab_ul")[0]
let lab_uls = document.getElementsByClassName("lab_uls")[0]
let lable_left = document.getElementsByClassName("lable_left")[0]
let flag = true;
let arr = [];
publish.onclick = function () {
    if (!biaoqian.value) {
        alert("标签不能为空")
        return
    } else if (!zhaiyao.value) {
        alert("摘要不能为空")
        return
    } else {
        let none = document.getElementsByClassName("none")[0];
        none.innerHTML = editor.getHtml("#editor-container");
        console.log(none.innerHTML);
        let arrJson = JSON.stringify(arr);
        let addObj = {
            label :biaoqian.value,
            abstract :zhaiyao.value,
            blog :none.innerHTML,
            time : getNowTime(),
            visitsNum :"0",
            arr :arrJson,
        }
        $.ajax({
            type:"PUT",
            url:`/api/blog/addBlog`,
            data:addObj,
            success(data){
                    arr = [];
                    biaoqian.value = "";
                    zhaiyao.value = "";
                    editor.clear()
                    lable_left.innerHTML = ""
                    lab_uls.style.visibility = "hidden";
                    jt.style.transform = "rotate(-45deg)"
                    flag = true;
            }
        })
    }
}

function getNowTime() {
    var date = new Date();
    var year = date.getFullYear();
    var month = date.getMonth() + 1;
    var day = date.getDate();
    var hour = date.getHours();
    var minute = date.getMinutes();
    var second = date.getSeconds();
    var time = year + '-' + addZero(month) + '-' + addZero(day) + ' ' + addZero(hour) + ':' + addZero(minute) +
        ':' + addZero(second);
    return time;
}

function addZero(s) {
    return s < 10 ? ('0' + s) : s;
}

jt.onclick = function () {
    if (flag) {
        lab_uls.style.visibility = "visible";
        jt.style.transform = "rotate(135deg)"
        flag = false
    } else if (flag == false) {
        lab_uls.style.visibility = "hidden";
        jt.style.transform = "rotate(-45deg)"
        flag = true;
    }
}

function Dropdown() {
    let xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
            let data = JSON.parse(xhr.responseText)
            for (let i = 0; i < data.length; i++) {
                lab_uls.innerHTML += `<li id="${data[i].id}" onclick="lab(this)">${data[i].labelClass}</li>`
            }
        }
    }
    xhr.open("GET", "/api/class/init", false)
    xhr.send()
}
Dropdown()

function lab(obj) {
    for (let index = 0; index < arr.length; index++) {
        if (arr[index] == obj.id) {
            alert("标签不能重复添加")
            return
        } else if (arr.length >= 4) {
            alert("最多只能添加四个标签")
            return
        }
    }
    arr.push(obj.id);
    lable_left.innerHTML += `<div class="${obj.id}"><span onclick="del(this)">x</span>${obj.innerHTML}</div>`
}

function del(obj) {
    lable_left.removeChild(obj.parentNode);
    for (let i = 0; i < arr.length; i++) {
        if (arr[i] == obj.parentNode.className) {
            arr.splice(i, 1)
        }
    }
}